<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无人机集群自主控制仿真平台</title>
    <link rel="shortcut icon" type="image/x-icon" href="imgs/uav.ico" media="screen"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script type="text/javascript" src="css/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="css/bootstrap.js"></script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
    <div class="container">
        <!-- 小屏幕导航按钮和logo -->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="formation.html" class="navbar-brand">无人机集群自主控制仿真平台</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="formation.html">集群编队</a>
                </li>
                <li>
                    <a href="massiveUAV.html">集群仿真</a>
                </li>
                <li>
                    <a href="search.html">协同搜索</a>
                </li>
                <li class="active">
                    <a href="deploy.html">干扰部署</a>
                </li>
                <li>
                    <a href="switch.html">信号开关</a>
                </li>
                <li>
                    <a href="fake.html">假目标策略</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 导航栏end -->

<div class="container-fluid">
    <div class="row">
        <!-- 左侧空栏 -->
        <div class="col-md-1"></div>
        <!-- canvas绘图区 -->
        <div class="col-md-6">
            <canvas id="main" style="background-image: url('imgs/micai.png');background-size: cover;">
            </canvas>
        </div>
        <div class="col-md-4">
            <!-- 任务初始化面板 -->
            <div class="panel panel-success">
                <div class="panel-heading" data-toggle="collapse" data-target="#mission_conf">任务生成 <span
                        class="glyphicon glyphicon-triangle-bottom pull-right"></span></div>
                <div class="collapse" id="mission_conf">
                    <div class="panel-body">
                        <div class="form-group form-inline">
                            <label class="control-label" for="target_num">目标个数：</label>
                            <input type="number" class="form-control" id="target_num" value="25">
                        </div>

                        <div class="form-group">
                            <label class="control-label" for="randomValue">目标分布：</label>
                            <textarea class="form-control" id="randomValue" cols="20" rows="3">
                            </textarea>
                        </div>
                        <button id="init_btn" class="btn btn-primary center-block" value="">重新生成
                        </button>
                    </div>
                </div>
            </div>
            <!--  实验配置面板 -->
            <div class="panel panel-warning">
                <div class="panel-heading" data-toggle="collapse" data-target="#simulation_conf">实验配置 <span
                        class="glyphicon glyphicon-triangle-bottom pull-right"></span></div>
                <div class="collapse" id="simulation_conf">
                    <div class="panel-body">
                        <div class="form-group form-inline">
                            <label class="control-label" for="inter_num">布站个数：</label>
                            <input type="number" class="form-control" id="inter_num" value="25">
                        </div>

                        <div class="form-group form-inline">
                            <label class="control-label" for="inter_range">作用范围：</label>
                            <input type="number" class="form-control" id="inter_range" value="120">
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label" for="particle_num">粒子个数：</label>
                            <input type="number" class="form-control" id="particle_num" placeholder="默认为10">
                        </div>
                        <div class="form-group form-inline">
                            <label class="control-label" for="iter_num">迭代次数：</label>
                            <input type="number" class="form-control" id="iter_num" placeholder="默认为1000">
                        </div>
                        <button id="start_btn" class="btn btn-primary center-block" value="">开始计算
                        </button>
                    </div>
                </div>
            </div>
            <!-- 数据监控面板 -->
            <div class="panel panel-warning">
                <div class="panel-heading" data-toggle="collapse" data-target="#data_conf">数据监控 <span
                        class="glyphicon glyphicon-triangle-bottom pull-right"></span></div>
                <div class="collapse in" id="data_conf">
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="control-label">数据导出：</label>

                            <div class="dropdown inline">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                        data-toggle="dropdown">
                                    请选择复制项
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#" id="copyVelBtn" onclick="simulation.copyVelHistory()"
                                           data-clipboard-text="">复制速度</a></li>
                                    <li><a href="#" id="copyPosBtn" onclick="simulation.copyPosHistory()"
                                           data-clipboard-text="">复制位置</a></li>
                                    <li><a href="#" id="copyReturnBtn" onclick="simulation.copyEvalution()"
                                           data-clipboard-text="">复制回报率</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <div id="monitor" class="center-block"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 弹出信息 -->
            <div class="alert alert-danger" style="display: none;" id="copy_message">
                已经复制到剪贴板
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
<script>
    $(function () {
        // 预先执行的js语句
        // 给手风琴控件增加事件，当一个空间显示，则关闭其他的
        $('.collapse').on('show.bs.collapse', function () {
            // 隐藏所有的控件
            $('.collapse').collapse('hide');
        });
    });

    // 设置监控器大小
    var monitorSize = $(".col-md-4").width();
    $("#monitor").css({"width": monitorSize, "height": monitorSize});
</script>
</body>

</html>